import React, { Component } from 'react'
import { Button,Modal} from 'antd'
import { FullscreenOutlined,FullscreenExitOutlined,ExclamationCircleOutlined } from '@ant-design/icons'
import screenfull from 'screenfull'
import { connect } from 'react-redux'
import {withRouter} from 'react-router-dom'
import dayjs from 'dayjs'

import { createDeleteUserInfoAction } from '../../redux/actions/login_action'
import menuList from '../../config/menuConfig'
// import {reqWeather} from '../../api'
import './header.less'
import weather from '../../assets/images/晴.jpeg'

@connect(
  state => ({ userInfo: state.userInfo,title:state.title }),
  {deleteUserInfo:createDeleteUserInfoAction}
)
@withRouter
class Header extends Component {

  state = {
    isFull: false,
    date: dayjs().format('YYYY年MM月DD日 HH:mm:ss'),
    title:''
  }

  //请求天气信息
  // getWeather= async() => {
  //   let result =await reqWeather()
  //   console.log(result);
  // }

  componentDidMount () {
    //给screenfull绑定change事件，用户按esc键退出全屏修改状态
    screenfull.on('change', () => {
      this.setState({isFull:!this.state.isFull})
    });
    this.timeID=setInterval(() => {
      this.setState({date:dayjs().format('YYYY年MM月DD日 HH:mm:ss')})
    }, 1000)
    // this.getWeather()
    this.getTitle()
  }
  componentWillUnmount () {
    clearInterval(this.timeID)
  }
  //退出登录
  logout=() => {
    // this.props.deleteUserInfo()
    Modal.confirm({
    title: '退出登录',
    icon: <ExclamationCircleOutlined />,
    content: '点击确认退出登录吗？',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      this.props.deleteUserInfo()
      },
    onCancel:()=>{}
  });
  }
  //切换全屏
  fullScreen=() => {
    screenfull.toggle()
  }

  getTitle = () => {
    // console.log('getTitle-----');
    let pathKey = this.props.location.pathname.split('/').reverse()[0]
    let title = ''
    menuList.forEach((item) => {
      if (item.children instanceof Array) {
        let tmp = item.children.find((citem) => {
          return citem.key===pathKey
        })
        if(tmp) title = tmp.title
      } else {
        if (pathKey === item.key) title = item.title
      }
    })
    this.setState({title})
  }

  render () {
    let { isFull } = this.state;
    let {user }=this.props.userInfo
    return (
      <div className='header'>
        <div className='top'>
          <Button size='small' onClick={this.fullScreen}>
            {isFull?<FullscreenExitOutlined />:<FullscreenOutlined />}
          </Button>
          <span className='username'>你好，{user.username }</span>
          <Button type='link' onClick={this.logout}>退出登录</Button>
        </div>
        <div className='bottom'>
          <div className='left'>
            {this.props.title || this.state.title}
          </div>
          <div className='right'>
            {this.state.date}
            <img src={weather} alt="天气" />
            晴 温度：2~10
          </div>
        </div>
      </div>
    )
  }
}
export default Header